<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初始Vue</title>
    <script src="js/vue.js"></script>
</head>
<body>
<!--
初始vue
    1.要让Vue工作,必须创建一个vue实例,且传入配置对象
    2.<div id="root">写的不是html代码 是Vue模板语法 所谓的模板语法就是html+js的混合体.类似jsx语法
    3.{{xxx}}中的xxx 能够自动看到data中所有的属性(注意不是data 是data中的属性),且xxx作为js表达式去解析
备注:一个Vue实例只能管理一个容器 真实开发中只有一个vue实例,其他的都写成组件
    一个Vue实例和一个容器是一一对应的
-->
<!--准备一个容器-->
<div id="root">
    <h1>hello {{country}}</h1>
</div>
<script type="text/javascript">
    Vue.config.productionTip=false// 生产提示禁止
    //创建一个Vue实例 且传入配置对象
    new Vue({
        el: '#root',//el用于指定当前VUE实例,属性值是字符串
        data: {//data用于存储数据,数据供el指定的容器使用. 值是一个对象 类似react中的state  程序员自己写的 自定义key value
            country: "中国"
        }
    })
</script>

</body>
</html>